<template>
    <div id="navigation-bar-back">
        <div id="navigation-bar">
            <navigation-item class="navigation-item" path="/"><img src="~assets/img/logo.svg" slot="item-text" alt="logo"></navigation-item>
            <navigation-item class="navigation-item" path="/home" style="margin-left: 150px">
                <span slot="item-text" :class="{ 'active': this.$route.path==='/home'|| this.$route.path==='/' }">首页</span>
            </navigation-item>
            <navigation-item class="navigation-item" path="/products">
                <span slot="item-text" :class="{ 'active': this.$route.path==='/products' }">自选保险</span>
            </navigation-item>
            <navigation-item class="navigation-item" path="/recommended">
                <span slot="item-text" :class="{ 'active': this.$route.path==='/recommended' }">保险推荐</span>
            </navigation-item>
            <navigation-item class="navigation-item" path="/owned">
                <span slot="item-text" :class="{ 'active': this.$route.path==='/owned' }">我的保险</span>
            </navigation-item>
            <navigation-item class="navigation-item" path="/others">
                <span slot="item-text" :class="{ 'active': this.$route.path==='/others' }">更多服务</span>
            </navigation-item>
            <navigation-item class="navigation-item" path="/profile">
                <span slot="item-text" :class="{ 'active': this.$route.path==='/profile' }">个人中心</span>
            </navigation-item>

        </div>
    </div>
</template>

<script>
    import NavigationItem from "../common/NavigationItem";

    export default {
        name: "Navigator",
        components: {
            NavigationItem,
        }
    }
</script>

<style scoped>
    #navigation-bar-back {
        width:100%;
        height:80px;
        border-bottom: 1px solid #d3d3d3;
    }
    #navigation-bar {
        width:1100px;
        height: 80px;
        font-size:18px;
        line-height:80px;
        margin: 0 auto;
        display: flex;
    }
    .navigation-item {
        margin: 0 auto;
    }
    /*.navigation-item:hover {*/
    /*    background-color: #71dd8a;*/
    /*}*/
    .navigation-item img {
        height: 120px;
        margin-top: -20px;
    }
    .active {
        color: #483fff;
    }
</style>
